<template>
	<!-- 订单待评价详情 -->
	<view class="pay">
		<view class="myorder">
			<view class="orderList">
				<view class="title">交易完成感谢您的支持</view>
				<view class="shalllList">2023/03/02 17:39</view>
			</view>
			<view class="InfoListloft">
				<view class="InfoList">
					<!-- 导航-->
					<view class="kong">
						<u-steps current="4" dot activeColor="red">
							<u-steps-item
								title="待付款"
								style="width: 130px;font-size: 16px;"
							></u-steps-item>
							<u-steps-item title="待发货"></u-steps-item>
							<u-steps-item title="待收货"></u-steps-item>
							<u-steps-item title="待评价"></u-steps-item>
							<u-steps-item title="已完成"></u-steps-item>
						</u-steps>
					</view>
				</view>
				<view class="goodorderes">
					<template v-for="(item, index) in arrayList">
						<my-order
							:key="index"
							:orderList="item"
							v-show="arrayList.length"
						></my-order>
					</template>
				</view>
			</view>
		</view>
		<view class="footer-order">
			<!-- 退款/删除订单/再次购买-->
			<view class="refund" @click="getsubmit">申请退款</view>
			<view class="refund">查看物流</view>
			<view class="refundover">确认收货</view>
		</view>
	</view>
</template>

<script>
import ordergoodsinfo from "../../components/order/ordergoodsinfo.vue";
export default {
	components: {
		"my-order": ordergoodsinfo
	},
	data() {
		return {
			arrayList: [
				{
					name: "nini",
					photo: 13511888888,
					price: 129.0,
					address: "陕西省西安市未央区12345",
					num: 1,
					address2: "2222",
					total: 798.0
				}
			]
		};
	},
	methods: {
		getsubmit() {
			uni.navigateTo({
				url: "/pages/orderinfo/refundorder"
			});
		}
	}
};
</script>

<style lang="scss">
.orderList {
	background-color: rgb(233, 52, 55);
	color: white;
	height: 180rpx;
	padding: 20px 20px;
	font-size: 16px;
	text-align: center;
	// #ifndef H5
	margin-top: 50px;
	// #endif
	.title {
		font-weight: bold;
		margin-bottom: 10px;
	}

	.shalllList {
		text-align: center;
	}
}

.InfoListloft {
	background-color: #ebebeb;
	height: 89vh;

	.goodorderes {
		margin-top: -20px;
	}
}

.InfoList {
	border-radius: 10px;
	background-color: white;
	position: relative;
	top: -35px;
	left: 0px;
	display: flex;
	height: 70px;
	width: 90%;
	margin: auto;

	font-size: 8px;

	.kong {
		margin: auto;
	}
}
.footer-order {
	display: flex;
	width: 100vw;
	background-color: white;
	height: 60px;
	padding-top: 15px;
	padding-left: 25px;
	.refund {
		border: 1px solid #ccc;
		height: 30px;
		line-height: 30px;
		text-align: center;
		width: 100px;
		border-radius: 25px;
		color: #ccc;
		margin-right: 10px;
	}
	.refundover {
		background-color: red;
		border: 1px solid #ccc;
		height: 30px;
		line-height: 30px;
		text-align: center;
		width: 100px;
		border-radius: 25px;
		color: white;
		margin-right: 10px;
	}
}
</style>
